<template>
  <div class="content-center">
    <!-- 页面标签/页面tab -->
    <div class="content-cotainer border-box">
      <!-- 面包屑 -->
      <div class="content-breadcrumb">
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">金融审计</el-breadcrumb-item>
          <el-breadcrumb-item>法人账户交易情况查询</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="big-box">
        <!-- 法人存款信息查询 描述 -->
        <div class="top-content">
          <div class="centent-title">
            <span>法人账户交易情况查询描述</span>
          </div>
          <div class="centent-inner top-inner">根据用户选择的法人账户及交易时间段查询交易数据，展现参数及查询结果，提供下载功能。</div>
        </div>

        <!-- 查询条件 -->
        <div>
          <div class="centent-title" @click="showCondition= !showCondition">
            <i
              :class="[showCondition?'el-icon-d-arrow-right rotate ':'el-icon-d-arrow-right rotate1 ']"
            ></i>
            <span class="show-box-title">查询条件</span>
          </div>
          <div class="centent-inner search-inner" v-show="showCondition">
            <div class="data-time">
              <span class="user-span">
                <i>*</i>法人账号：
              </span>
              <el-input v-model="input" placeholder="请输入内容" claass="user-input"></el-input>
              <div class="radio-right">
                <span class="account">
                  <i>*</i>账户类型：
                </span>
                <el-radio-group v-model="radio">
                  <el-radio :label="6">法人活期</el-radio>
                  <el-radio :label="9">法人定期</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="start-time">
              <span class="user-span">
                <i>*</i>开始日期：
              </span>
              <el-input v-model="input" placeholder="请输入内容" claass="user-input"></el-input>
              <span class="user-span span-right">
                <i>*</i>结束日期：
              </span>
              <el-input v-model="input" placeholder="请输入内容" claass="user-input"></el-input>
            </div>

            <div class="btn-box">
              <button class="btn btn-primary done-btn" @click="dialogVisible = false">
                <span>提交</span>
              </button>
              <button class="btn btn-primary done-btn" @click="dialogVisible = false">
                <span>重置</span>
              </button>
            </div>
          </div>
        </div>
        <!-- 查询结果 -->
        <div>
          <div class="centent-title" @click="showResult= !showResult">
            <i
              :class="[showResult?'el-icon-d-arrow-right rotate ':'el-icon-d-arrow-right rotate1 ']"
            ></i>
            <span class="show-box-title">查询结果</span>
          </div>
          <div class="centent-inner result-inner" v-show="showResult">
            <!-- 搜索 -->
            <p class="transaction">交易信息：</p>
            <div class="inner-search-box">
              <button class="btn btn-primary" @click="exportHandle">
                <i class="iconfont icon-export"></i>
                <span>导出</span>
              </button>
              <button class="btn btn-primary reset-btn" @click="resetHandle">
                <i class="iconfont icon-reset"></i>
                <span>隐藏列</span>
              </button>

              <!--字段-->
              <div class="field-item">
                <span class="item-title">字段：</span>
                <div class="select-box">
                  <el-select v-model="fieldValue" placeholder="请选择字段">
                    <el-option
                      v-for="item in fieldOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <!--条件-->
              <div class="field-item">
                <span class="item-title">条件：</span>
                <div class="select-box">
                  <el-select v-model="fieldValue" placeholder="请选择条件">
                    <el-option
                      v-for="item in fieldOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>

              <!--条件数值-->
              <div class="field-item">
                <span class="item-title">条件数值：</span>
                <div class="select-box">
                  <el-select v-model="fieldValue" placeholder="请选择条件数值">
                    <el-option
                      v-for="item in fieldOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>

              <div class="search-input">
                <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="searchHandle"></el-button>
                  <!-- <button slot="append" class="btn btn-primary reset-btn" @click="resetHandle">
                    <i class="iconfont icon-reset"></i>
                    <span>隐藏列</span>
                  </button>-->
                </el-input>
              </div>
            </div>
            <!-- 表格 -->
            <div class="inner-table">
              <el-table
                ref="multipleTable"
                :data="tableData.slice((currPage-1)*pageSize,currPage*pageSize)"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序号" width="50">
                  <template slot-scope="scope">
                    <span style="text-decoration:none" @click="goInfo(scope.row)">{{scope.$index+1}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="bankName" label="银行名称" width="150"></el-table-column>
                <el-table-column prop="accountNumber" label="法人账号" width="150"></el-table-column>
                <el-table-column prop="accountTitle" label="账户名称" width="200"></el-table-column>
                <el-table-column prop="currency" label="币种" width="150"></el-table-column>
                <el-table-column prop="state" label="状态" width="150"></el-table-column>
                <el-table-column prop="openingBank" label="开户行" width="150"></el-table-column>
                <el-table-column prop="accountType" label="账户类型" width="150"></el-table-column>
                <el-table-column prop="openingDate" label="开户日期" width="150"></el-table-column>
              </el-table>
            </div>

            <p class="transaction">明细信息：</p>
            <div class="inner-search-box">
              <button class="btn btn-primary" @click="exportHandle">
                <i class="iconfont icon-export"></i>
                <span>导出</span>
              </button>
              <button class="btn btn-primary reset-btn" @click="resetHandle">
                <i class="iconfont icon-reset"></i>
                <span>隐藏列</span>
              </button>

              <!--字段-->
              <div class="field-item">
                <span class="item-title">字段：</span>
                <div class="select-box">
                  <el-select v-model="fieldValue" placeholder="请选择字段">
                    <el-option
                      v-for="item in fieldOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <!--条件-->
              <div class="field-item">
                <span class="item-title">条件：</span>
                <div class="select-box">
                  <el-select v-model="fieldValue" placeholder="请选择条件">
                    <el-option
                      v-for="item in fieldOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>

              <!--条件数值-->
              <div class="field-item">
                <span class="item-title">条件数值：</span>
                <div class="select-box">
                  <el-select v-model="fieldValue" placeholder="请选择条件数值">
                    <el-option
                      v-for="item in fieldOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>

              <div class="search-input">
                <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="searchHandle"></el-button>
                  <!-- <button slot="append" class="btn btn-primary reset-btn" @click="resetHandle">
                    <i class="iconfont icon-reset"></i>
                    <span>隐藏列</span>
                  </button>-->
                </el-input>
              </div>
            </div>
            <!--表格-->
            <div class="inner-table">
              <el-table
                ref="multipleTable"
                :data="tableDatas.slice((currPage-1)*pageSize,currPage*pageSize)"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序号" width="50">
                  <template slot-scope="scope">
                    <span style="text-decoration:none" @click="goInfo(scope.row)">{{scope.$index+1}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="bankName" label="银行名称" width="150"></el-table-column>
                <el-table-column prop="account" label="账户" width="150"></el-table-column>
                <el-table-column prop="transactionDate" label="交易日期" width="150"></el-table-column>
                <el-table-column prop="transactionTime" label="交易时间" width="250"></el-table-column>
                <el-table-column prop="transactionCode" label="交易代码" width="200"></el-table-column>
                <el-table-column prop="transactionName" label="交易名称" width="200"></el-table-column>
                <el-table-column prop="lendingSigns" label="借贷标志" width="200"></el-table-column>
                <el-table-column prop="openingDate" label="开户日期" width="150"></el-table-column>
              </el-table>
            </div>

            <!-- 分页 -->
            <div class="inner-pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :current-page="currPage"
                :page-size="pageSize"
                :total="tableData.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              ></el-pagination>
              <span class="pageInfo">当前第{{1}}页/每页{{pageSize}}条，共{{tableData.length}}条</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCondition: false, //是否显示查询条件
      showResult: false, //是否展示查询结果
      input: "",
      checked: true,
      radio: 3,

      fieldOptions: [
        {
          value: "选项1",
          label: "字段1"
        },
        {
          value: "选项2",
          label: "字段2"
        },
        {
          value: "选项3",
          label: "字段3"
        }
      ],
      fieldValue: "", //频度

      searchValue: "", //搜索框
      tableData: [
        {
          bankName: "中国建设银行",
          accountNumber: "104331000044",
          accountTitle: "北京移动通信有限公司",
          currency: "人民币",
          state: "-",
          openingBank: "建设银行",
          accountType: "业务账户",
          openingDate: "2019-01-01"
        },
        {
          bankName: "中国建设银行",
          accountNumber: "104331000044",
          accountTitle: "北京移动通信有限公司",
          currency: "人民币",
          state: "-",
          openingBank: "建设银行",
          accountType: "业务账户",
          openingDate: "2019-01-01"
        },
        {
          bankName: "中国建设银行",
          accountNumber: "104331000044",
          accountTitle: "北京移动通信有限公司",
          currency: "人民币",
          state: "-",
          openingBank: "建设银行",
          accountType: "业务账户",
          openingDate: "2019-01-01"
        },
        {
          bankName: "中国建设银行",
          accountNumber: "104331000044",
          accountTitle: "北京移动通信有限公司",
          currency: "人民币",
          state: "-",
          openingBank: "建设银行",
          accountType: "业务账户",
          openingDate: "2019-01-01"
        }
      ],
      currPage: 1,
      pageSize: 10,
      tableDatas: [
        {
          bankName: "中国建设银行",
          account: "北京移动通信...",
          transactionDate: "2019-03-08",
          transactionTime: "下午02:00",
          transactionCode: "104331000044...",
          transactionName: "暂无信息",
          lendingSigns: "记账 1",
          openingDate: "2019-01-01"
        },
        {
          bankName: "中国建设银行",
          account: "北京移动通信...",
          transactionDate: "2019-03-08",
          transactionTime: "下午02:00",
          transactionCode: "104331000044...",
          transactionName: "暂无信息",
          lendingSigns: "记账 1",
          openingDate: "2019-01-01"
        },
        {
          bankName: "中国建设银行",
          account: "北京移动通信...",
          transactionDate: "2019-03-08",
          transactionTime: "下午02:00",
          transactionCode: "104331000044...",
          transactionName: "暂无信息",
          lendingSigns: "记账 1",
          openingDate: "2019-01-01"
        },
        {
          bankName: "中国建设银行",
          account: "北京移动通信...",
          transactionDate: "2019-03-08",
          transactionTime: "下午02:00",
          transactionCode: "104331000044...",
          transactionName: "暂无信息",
          lendingSigns: "记账 1",
          openingDate: "2019-01-01"
        }
      ],
      currPage: 1,
      pageSize: 10
    };
  },
  methods: {
    resetHandle() {
      console.log("重置");
      // this.userValue = "";
      // this.funcValue = "";
      // this.logValue = "";
      // this.timeValue = "";
    },
    exportHandle() {
      // console.log(this.multipleSelection);
      console.log("导出");
    },
    searchHandle() {
      console.log("搜索");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currPage = val;
    }
  }
};
</script>

<style lang="less" scoped>
.content-cotainer {
  padding: 0 20px 20px 20px;
  height: 100%;
  .big-box {
    width: 100%;
    height: calc(100vh - 175px);
    overflow-y: scroll;
    // background-color: #fff;
  }
  .centent-title {
    box-sizing: border-box;
    i {
      color: #455f85;
      margin-left: 20px;
    }
    .show-box-title {
      margin-right: 10px;
      color: #455f85;
    }
    .rotate {
      transition: all 0.5s;
      transform: rotate(90deg);
    }
    .rotate1 {
      transform: rotate(0deg);
      transition: all 0.5s;
    }
  }
  .centent-inner {
    padding: 0 20px 20px 20px;
    .transaction {
      margin-top: 20px;
      color: #333333;
      font-size: 14px;
      font-weight: 600;
    }
  }

  // 会计科目描述
  .top-inner {
    height: 145px;
    box-sizing: border-box;
    padding: 20px;
    font: 16px/24px "PingFangSC-Regular";
    color: #333333;
  }
  // 搜索内容
  .search-inner {
    width: 100%;
    height: 243px;
    box-sizing: border-box;
    padding: 40px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-self: flex-start;
    .data-time {
      display: flex;
      /*justify-content: space-between;*/
      width: 100%;
      margin: 20px 0 20px 40px;

      span {
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        text-align: right;
        line-height: 32px;
        i {
          font-size: 14px;
          color: #e02020;
          letter-spacing: 0;
          text-align: right;
          line-height: 20px;
          margin-right: 3px;
        }
      }

      /*.user-span {
								margin-left: 48px;
							}*/
      &/deep/.el-input {
        width: 40%;
        input {
          height: 32px;
        }
      }
      /*&/deep/.el-input:nth-of-type(3) {
								width: 460px;
							}*/

      .radio-right {
        margin-left: 70px;
        &/deep/.account {
          font-size: 14px;
          color: #333333;
          margin-right: 14px;
          i {
            font-size: 14px;
            color: #e02020;
            letter-spacing: 0;
            text-align: right;
            line-height: 20px;
            margin-right: 3px;
          }
        }
        &/deep/.el-radio__input.is-checked .el-radio__inner {
          border-color: #6c8ab6;
          background: #6c8ab6;
        }
        &/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
          background-color: #6c8ab6;
          border-color: #6c8ab6;
        }
      }
    }
    .start-time {
      display: flex;

      width: 100%;
      margin: 20px 0 20px 40px;
      span {
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        text-align: right;
        line-height: 32px;
        i {
          font-size: 14px;
          color: #e02020;
          letter-spacing: 0;
          text-align: right;
          line-height: 20px;
          margin-right: 3px;
        }
      }
      .span-right {
        margin: 0 0 40px 40px;
      }
      &/deep/.el-input {
        width: 40%;
        input {
          height: 32px;
        }
      }
    }
    .btn-box {
      width: 100%;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      .btn {
        width: 70px;
        margin: 0 10px;
      }
    }
  }
  // 结果内容
  .result-inner {
    .inner-search-box {
      width: 100%;
      height: 32px;
      margin: 20px 0;
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      align-items: flex-start;
      .search-input {
        width: 310px;
        height: 32px;
      }
      .btn {
        margin-right: 20px;
      }
      .field-item {
        height: 32px;
        line-height: 32px;
        display: flex;
        margin-right: 20px;
        /deep/.el-input__inner {
          width: 160px;
          height: 32px;
          line-height: 32px;
          font-size: 14px;
        }
      }
      /deep/.el-input__inner {
        height: 32px;
      }
      /deep/.el-input-group__append,
      .el-input-group__prepend {
        height: 32px;
        background-color: #6c8ab6;
        border: none;
        color: #ffffff;
      }
    }

    .inner-table {
      //   复选框
      /deep/.el-checkbox__label {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        padding-left: 5px;
      }

      /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #6c8ab6;
        border-color: #6c8ab6;
      }

      /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
        color: #333;
      }

      /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #6c8ab6;
        border-color: #6c8ab6;
      }
    }
    .inner-pagination {
      display: flex;
      .pageInfo {
        margin-top: 4px;
        color: #666666;
        font-size: 14px;
      }
    }
  }
}
.top-content {
  margin-bottom: 20px;
}
/deep/.el-range-editor.el-input__inner {
  padding: 0 10px;
}
</style>